<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D魔方</title>
    <style>
        /*2.魔方样式*/
        /*2.1魔方需要放在中间位置*/
        #container{
            width:500px;
            height:500px;
            bo rder:1px solid red; /*border边框复合属性：1.像素实线边框*/
         /*盒模型：元素存放在盒子模型中：外边距+边框内边距+内边距+内容 （快递） */
            margin:200px auto; /*居中*/
        }
        /*2.魔方整体：3D坐标轴*/
        .box{
            width:300px;
            height:300px;
            bord er:1px solid red;
            /*复合属性 转换属性：3D坐标轴功能----保留一个面*/
            transform-style: preserve-3d;
            /*立体空间：没有明确X、Y、Z轴（自己定的坐标）*/
            transform: rotateX(45deg) rotateY(45deg);
            /*（复合属性）动画：关键帧名字 过渡时间 过渡样式 无限次*/
            animation: mofang 10s linear infinite;
            /*拼魔方思路：
            1.将6个面归到一个位置
            2.自己拟定XYZ轴，口诀：先位移，后旋转------Z轴
                     向上位移                向下位移
                    向左位移+90旋转          向右位移+90旋转
                   向前位移+90旋转          向后位移+90旋转
            X轴--横面  Y轴---垂直面     Z轴---纵面

            */
        }
        /*关键帧---手翻书*/
        @keyframes mofang {
            0%{transform: rotateX(45deg) rotateY(45deg);}
            70%{transform: rotateX(180deg) rotateY(180deg);}
            100%{transform: rotateX(360deg) rotateY(360deg);}
        }
        /*3.魔方6个面颜色*/
        /*公共面：具备相同特征：都有宽高！起同一个别名即可*/
        .page{
            width:300px;
            height:300px;
            position:absolute;
        }
        .page_top{
            background: #7cec0c;/*颜色必须是16进制*/
            transform: translateZ(150px);
        }
        .page_bottom{
            background:#dc4610;
            transform: translateZ(-150px);
        }
        .page_left{
            background:#1669d7;
            transform: translateX(-150px) rotateY(90deg);
        }
        .page_right{
            background:#9500e1;
            transform: translateX(150px) rotateY(90deg);
        }
        .page_before{
            background: #ff4d00;
            transform: translateY(150px) rotateX(90deg);
        }
        .page_after{
            background: #e1a6e7;
            transform: translateY(-150px) rotateX(90deg);
        }
    </style>
</head>
<body>
<!--3D魔方思路：设计HTML结构、CSS样式：颜色、动画-->
<!--1.设计HTML结构:魔方6个面：有空间div（空间、特点：有宽没高）--魔方整体
      在6个面外层设计起1个别名：box-----盒子外围还有空间：（居中、3D视效）
-->
        <div id="container">
    <div class="box">
 <!--                      width    style       color
     CSS有很多复合属性：border：1px     solid       red
                     border-width：2px；
                     border-style：double/dashed/solid；
                     border-color：green；
 -->
<div class="page_top page"></div>
<div class="page_bottom page"></div>
<div class="page_left page"></div>
<div class="page_right page"></div>
<div class="page_before page"></div>
<div class="page_after page"></div>
    </div>
        </div>
</body>
</html>